import { FC, useState } from 'react';
import styled, { css } from 'styled-components';
type ButtonProps = {
  flag?: boolean;
};
const Button = styled.button<ButtonProps>`
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  ${(props: ButtonProps) =>
    props?.flag &&
    css`
      background-color: #0056b3;
      color: #ff5400;
    `}
`;
const Demo: FC = () => {
  const [flag, setFlag] = useState(false);

  return (
    <div>
      <h1>Styled Components Demo</h1>
      <Button
        flag={flag}
        style={{ fontSize: '36px' }}
        onClick={setFlag.bind(null, !flag)}
      >
        Click me
      </Button>
    </div>
  );
};

export default Demo;
